<template>
  <div class="overview">
    <info-item label="公司概况" class="com-info">
      <item-card>
        <img src="@/assets/index/overview/组1拷贝.png" style="width: 100%;" alt />
        <div class="intro clearfix">
          <img src="@/assets/index/overview/icon_公司介绍.png" alt />
          <div>公司简介</div>
          <div style="font-size: 14px; line-height: 1.6;">
            {{ (showMore ? (details || info.details) : info.details) || '无' }}
            <template
              v-if="details"
            >
              <el-button
                v-if="details && showMore"
                class="detail-btn"
                size="mini"
                @click="showMore = false"
              >
                <i class="el-icon-d-arrow-right"></i>
                详情
              </el-button>
              <el-button v-else class="detail-btn" size="mini" @click="showMore = true">
                <i class="el-icon-d-arrow-left"></i>
                详情
              </el-button>
            </template>
          </div>
        </div>
        <div class="address">
          <img src="@/assets/index/overview/icon_智能运维服务接入时间.png" alt />
          <div>
            <div style="margin-bottom: 4px;">地址</div>
            <div style="flex: 1">{{ info.address || '无' }}</div>
          </div>
        </div>
      </item-card>
      <div class="item-list">
        <div class="row">
          <item-card>
            <img src="@/assets/index/overview/icon_智能运维服务接入时间.png" alt />
            <div>
              <div>智能运维服务接入时间</div>
              <div>{{ info.jointime || '无' }}</div>
            </div>
          </item-card>
          <spliter />
          <item-card>
            <img src="@/assets/index/overview/icon_合同到期日.png" alt />
            <div>
              <div>执行合同时间</div>
              <div>{{ info.conExeTime || '无' }}</div>
            </div>
          </item-card>
        </div>
        <div class="row" style="margin: 0">
          <item-card>
            <img src="@/assets/index/overview/icon_合同到期日.png" alt />
            <div>
              <div>合同到期日</div>
              <div>{{ info.expirationtime || '无' }}</div>
            </div>
          </item-card>
          <spliter />
          <item-card>
            <img src="@/assets/index/overview/icon_联系人.png" alt />
            <div>
              <div>联系人</div>
              <div>{{ (info.leader + info.phoneNum) ? info.leader || '无' + ' ' + info.phoneNum || '无' : '无' }}</div>
            </div>
          </item-card>
        </div>
      </div>
    </info-item>
    <info-item label="设备概览" class="dev-info">
      <div class="row">
        <item-card class="item">
          <img src="@/assets/index/overview/icon_高压配电房.png" alt />
          <div>{{ "配电房数量" }}</div>
          <dev-val :num="info.roomcount"></dev-val>
        </item-card>
        <spliter width="14" />
        <item-card class="item">
          <img src="@/assets/index/icon-发电机.png" alt />
          <div>{{ "固定式式柴油发电机" }}</div>
          <dev-val :num="info.genNum || 0"></dev-val>
        </item-card>
      </div>
      <div class="row">
        <item-card class="item">
          <img src="@/assets/index/icon-SC11-120010变压器.png" alt />
          <div>{{ "SC11-1200/10变压器" }}</div>
          <dev-val :num="info.transformercount"></dev-val>
        </item-card>
        <spliter width="14" />
        <item-card class="item">
          <img src="@/assets/index/icon-低压无功补偿.png" alt />
          <div>{{ "低压无功补偿" }}</div>
          <dev-val :value="(info.lowKvar || 0) + 'KVA'"></dev-val>
        </item-card>
      </div>
      <div class="row">
        <item-card class="item">
          <img src="@/assets/index/icon_发电容量.png" alt />
          <div>{{ "发电容量" }}</div>
          <dev-val :value="(info.gencapacity || 0) + 'KW'"></dev-val>
        </item-card>
      </div>
    </info-item>
  </div>
</template>

<script>
import InfoItem from "./InfoItem";
import ItemCard from "../ItemCard";
import DevVal from "./DevVal";
import Spliter from "@/components/Spliter";
export default {
  components: {
    InfoItem,
    ItemCard,
    Spliter,
    DevVal
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showMore: true
    };
  },
  computed: {
    details() {
      const max = 80;
      try {
        const details = this.info.details;
        if (details.length > max) {
          return details.substr(0, max) + "...";
        } else {
          return details;
        }
      } catch (e) {
        return null;
      }
    }
  },
  created() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.overview {
  display: flex;
  align-items: stretch;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px;
  img {
    margin-right: 6px;
    background: #fff;
    width: 30px;
    height: 30px;
  }
  .com-info {
    flex: 4;
    margin-right: 10px;
    .intro {
      position: relative;
      padding: 6px;
      img {
        float: left;
        height: 34px;
        width: 34px;
        background: #fff;
        margin-right: 6px;
        margin-bottom: 10px;
      }
      .detail-btn {
        margin-left: 10px;
        height: 22px;
        border-radius: 12px;
        line-height: 22px;
        padding: 0 10px;
      }
    }
    .intro.isOpen {
      height: 100px;
      overflow-y: auto;
    }
    .address {
      display: flex;
      padding: 6px;
      background: rgba($color: #cedcec, $alpha: 0.34);
    }
    .item-list {
      margin-top: 10px;
      .item-card {
        display: flex;
        padding: 6px;
        align-items: center;
        flex: 1;
      }
    }
  }
  .dev-info {
    flex: 3;
    .row {
      align-items: stretch;
      margin-bottom: 10px;
    }
    .item {
      box-sizing: border-box;
      max-width: calc((100% - 14px) / 2);
      flex: 1;
      text-align: center;
      padding: 6px;
      border: 1px solid rgba(230, 234, 238, 1);
      background: #fafbfc;
    }
  }
}
</style>
